<template>
  <div class="user-info-container" v-if="userDetail">
    <template v-if="isShow">
      <el-card class="user-info">
        <el-image
          :src="userDetail?.avatarUrl"
          :preview-src-list="[userDetail!.avatarUrl as string]"
          fit="cover"
        />
        <div class="info">
          <h3>{{ userDetail?.username }}</h3>
          <div>
            性别:
            {{ userDetail?.gender }}
          </div>
          <div>
            Email:
            {{ userDetail?.email ?? "还没有填写" }}
          </div>
          <div>
            简介:
            {{ userDetail?.desc ?? "还没有填写" }}
          </div>
        </div>
        <template v-if="userDetail.username === userStore.userInfo?.username">
          <el-button type="primary" @click="isShow = false">编辑</el-button>
        </template>
        <template v-else>
          <el-button type="primary">关注</el-button>
        </template>
      </el-card>

      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="文章" name="first">
            <!-- <Home /> -->
            <template v-for="item of article">
              <ArticleCard :article="item" />
            </template>
          </el-tab-pane>
          <el-tab-pane label="图片" name="second">
            <template v-for="pic in userDetail?.file">
              <el-image
                style="width: 50%; padding: 10px 5px"
                :src="pic"
                :preview-src-list="[pic]"
                fit="cover"
              />
            </template>
          </el-tab-pane>
          <el-tab-pane label="评论" name="third">
            <template v-for="comment in userDetail?.comment">
              <MessageBox :data="comment" />
            </template>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </template>
    <template v-else>
      <EditUsereInfo @back="isShow = true" :getData="getData" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import { getUserInfoByID } from "@/service/user";
import { getArticleByUserId } from "@/service/article";
import { useUpdateUserInfo } from "@/hooks/useUserStore";

import MessageBox from "../Chat/MessageBox.vue";
import ArticleCard from "@/components/ArticleCard/ArticleCard.vue";
import EditUsereInfo from "./EditUsereInfo.vue";

import user from "@/store/user";
const route = useRoute();
const activeName = ref("first");
const article = ref();
const userStore = user();
const isShow = ref(true);
const userDetail = ref();

const getData = async () => {
  if (!route.params.id) {
    // 获取自己的文章
    const resArticle: any = await getArticleByUserId(
      userStore.userInfo?.id as number
    );
    article.value = resArticle.data.articles;
    useUpdateUserInfo();
    userDetail.value = userStore.userInfo;
  } else {
    // 获取其他用户信息和文章
    const res: any = await getUserInfoByID(route.params.id as string);
    const resArticle: any = await getArticleByUserId(route.params.id);
    article.value = resArticle.data.articles;
    userDetail.value = res.data;
  }
};

watch(
  () => route.path,
  () => {
    getData();
  },
  {
    immediate: true,
    deep: true
  }
);
// onMounted(() => {
//   getData();
// });
</script>

<style scoped lang="less">
.user-info-container {
  display: flex;
  flex-direction: column;
  margin-top: 80px;
  width: 100%;
  .el-card {
    width: 100%;
    margin: 10px 0;
    .article-item {
      max-width: 100%;
    }

    :deep(.el-image) {
      & > img {
        width: 100%;
        height: 250px;
      }
    }
    #pane-second {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      //
      &::after {
        content: " ";
        flex: auto;
      }
    }
  }
  .user-info {
    // text-align: center;
    :deep(.el-card__body) {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .el-button {
        width: 15%;
      }

      .el-image__inner {
        user-select: none;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 20px;
        object-fit: fill;
      }
      .info {
        flex: 1;
        div {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
